<template>
    <div id="Index">
      <div class="top">
        <div class="logo">
          
        </div>
      </div>
      <div class="bodys">
        <div class="titles">
          <h4>账号登陆</h4>
        </div>
        <div class="inputps">
          <div class="kong"></div>
          <input type="text" id="uid" value="请输入账号" v-model="user"/>
          <input type="password" name="uwd" id="uwd" value="" v-model="pwd"/>
        </div>
        <div class="btn">
          <button type="submit" class="btns" @click="login()">
            <p>登陆</p>
          </button>
        </div>
        <div class="next">
          <div class="next_nei">
            <input type="checkbox" name="" id="" value="" /><p>下次登陆</p>
          </div>
          <br>
          <div class="tishi">
            <a href="http://localhost:8080/#/captcha"><p>找回密码</p></a>
            <a href="http://localhost:8080/#/regist"><p>注册账号</p></a>
          </div>
        </div>
        
      </div>
      <div class="boots">
        <p>关于我的 | 服务条款 | 隐私政策 | 客服中心 | 联系我们 | 帮助中心 | ©1998 - 2022 Tencent Inc. All Rights Reserved.<br>
  粤公网安备  44030002000001号ICP备案号  粤B2-20090059增值电信业务经营许可证  粤B2-20090059</p>
      </div>
    </div>
</template>
  <script>
  import ChartBlock from 'echarts-vue-component'
  export default {
    name: 'index',
    components: {ChartBlock},
    data () {
      return {
        user:"",
        pwd:""
      }
    },
    mounted () {//页面创建完成后立即调用
      
    },
    methods: {//用时才用
      login(){
        console.log(this.user+"==========="+this.pwd)
        const that = this;
        this.axios({
          method : 'POST',
          url : 'http://192.168.1.7:5001/login',
          data : {
            user : this.user,
            pwd : this.pwd
          },
          headers:{
                'Content-Type': 'application/json' //以json格式传输
          }
        })
        .then((res)=>{
          console.log(res.data)
          if(res.data[4] == 1){
              //进入后台
              this.$message({
                message: '登陆成功',
                type: 'success'
              });
              this.$router.push({path:'/main'})
          }
          else if(res.data[4] == 0){
              //进入用户界面
              this.$message({
                message: '登陆成功',
                type: 'success'
              });
              this.$router.push({path:'/map',query: res.data})
          }
          else{
            this.$message.error('账号或密码错误');
          }
        })
      }
    },
    
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
    /* #Index{
        text-align: center;
    } */
    *{
				padding: 0;
				margin: 0;
        /* background: url("../img/bg.jpeg") repeat fixed center; */
			}
    #Index{
        background: url("../img/bg.jpeg") repeat fixed center;
        width: 100%;
        height: 720px;
				background-repeat: no-repeat;
				background-position: left top;
			}
			a{
				text-decoration: none;
			}
			.top{
				height: 80px;
				border: aliceblue solid 1px;
				background-color: #fee5c7;
			}
			.top .logo{
				width: 185px;
				height: 35px;
				margin-left: 48px;
				margin-top: 20px;
				background-repeat: no-repeat;
				background-position: left bottom;
				background-size: 182px 35px;
				/* background-image: url(../img/logo.webp); */
			}
			.top .top_link{		
				height: 30px;
				margin-right: 17px;
				margin-top:-33px ;
				padding: 7px;
				float: right;
				font-size: 12px;
				color: #fc8e7d;
				line-height: 30px;
			}
			.top_link a{
				color:#fc8e7d ;
			}
			.top_link :hover{
				color: #00FFFF;
			}
			.bodys{
				width: 334px;
				height: 400px;
				border: #FC8E7D solid 1px;
				border-radius: 5px;
				margin-left: 800px;
				margin-top: 90px;
				background-color: rgba(251,98,90,0.3);
				text-align: center;
				
			}
			.bodys h4{
				font-weight: 400;
				font-size: 18px;
				
			}
			.bodys .titles{
				border-radius: 5px 5px 0px 0px;
				height: 64px;
				background-color: #fb9183;
				line-height: 64px;
				color: #F0F8FF;
			}
			.inputps{
				/* background-color: rgba(251,98,90,0.3); */
				height: 179px;
				width: 333px;
			}
			.inputps input{
				display: block;
				width: 232px;
				height: 38px;
				background-color: azure;
				margin-left: 50px;
				margin-top: 22px;
				border-radius: 2px;
			}
			.kong{
				height: 50px;
			}
			.btn{
				height: 50px;
				
			}
			.btns{
				display: block;
				border-radius: 15px;
				margin: 40px auto;
				width: 232px;
				height: 50px;
				background-color: #21170d;
				font-size: 18px;
				color: #F0F8FF;
			}
			.btn :hover{
				background-color: rgb(168,66,18);
			}
			.btns :hover{
				background-color: rgb(168,66,18);
			}
			.next input{
				display:block ;
				float: left;
				margin: 3px;
			}
			.next p{
				font-size: 13px;
				float: left;
				
			}
			.next_nei{
				margin-top: 20px;
				margin-left: 132px;
			}
			.tishi{
				height: 30px;
				float: left;
				margin-bottom: 5px;
			}
			.tishi p{
				font-size: 12px;
				color: #F0FFFF;
				font-weight: 400;
				padding-left: 79px;
			}
			.tishi a :hover{
				color: aqua;
			}
			.boots{
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				padding-bottom: 0;
				height: 40px;
				background-color: rgba(254,229,199,0.5);
			}
			.boots p{
				font-size: 13px;
				font-weight: 400;
				color: fff;
				text-align: center;
			}
  </style>
  